<div id="vue-good-platform-sku" style="width: 100%"></div>
<script>
    Dcat.ready(function () {
        window.appInit('#vue-good-platform-sku',{
            template: `
                <n-table class="table" >
                    <n-thead>
                        <n-tr>
                            <n-th>规格</n-th>
                            <n-th>图片</n-th>
                            <n-th>库存</n-th>
                            <n-th>价格</n-th>
                        </n-tr>
                    </n-thead>
                    <n-tbody>
                        <template v-for="(sku) in sku_list">
                            <n-tr>
                                <n-th>@{{getSkuAttrs(sku_keys,sku)}}</n-th>
                                <n-td><img  data-action="preview-img" v-if="sku.pic" :src="sku.pic" style="width: 40px;height: 40px" /></n-td>
                                <n-td>@{{sku.stock}}</n-td>
                                <n-td>@{{sku.price}}</n-td>
                            </n-tr>
                        </template>
                    </n-tbody>
                </n-table>
            `,
            data(){
                return {
                    sku_list: Vue.ref(@json($sku_list)),
                    sku_keys: Vue.ref(@json($sku_keys)),
                }
            },
            methods:{
                getSkuAttrs(keys, sku){
                    const attrs = [];
                    keys.forEach(item=>{
                        attrs.push(item+":"+sku[item])
                    })
                    return attrs.join(" - ");
                }
            }
        })
    })
</script>
